<template>
	<view>
		<scroll-view :scroll-top="scrollValue" @scroll="scroll" scroll-y="true" :enable-flex="true">
			<view class="fuel-box" v-if="show">
				<view class="msg">
					<view class="card-select">
						<text>油卡：</text>
						<view class="select-box">
							<uni-data-select v-model="fuelCard.id" :localdata="fuelCardList" @change="change"
								:clear="false"></uni-data-select>
						</view>
					</view>
					<view class="card-acount">
						<text>余额：</text><text>¥{{fuelCard.balance}}</text>
					</view>
				</view>
				<view class="btn">
					<view @click="fueling"><uni-icons custom-prefix="iconfont" type="icon-baoyang" size="20"
							color="#3250EC"></uni-icons>加 油</view>
				</view>
				<view class="list" v-for="(item,index) in fuelRecordList" :key="index">
					<view class="title">上次加油</view>
					<view class="item">
						<view><span>上次加油日期</span><span>{{item.fuelTime}}</span></view>
						<view><span>车牌号</span><span>{{item.carCodeNumber}}</span></view>
						<view><span>油卡号</span><span>{{item.cardNumber}}</span></view>
						<view><span>上次里程数</span><span>{{item.currentKm}}</span></view>
						<view><span>单价</span><span>￥{{item.price}}</span></view>
						<view><span>容量</span><span>{{item.capacity}}L</span></view>
						<view><span>金额</span><span>￥{{item.amount}}</span></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<back-to-top :goTop="goTop"></back-to-top>
	</view>
</template>

<script>
	import * as API from '@/common/api';
	export default {
		name: "pages-materialPackage-fuelCard",
		data() {
			return {
				fuelCard: {},
				fuelCardList: [],
				fuelRecordList: [],
				show: false,
				scrollValue: 0,
				oldScrollValue: 0,
			};
		},
		async mounted() {
			await this.listAllFuelCard();

		},
		methods: {
			scroll: function(e) {
				this.oldScrollValue = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollValue = this.oldScrollValue
				this.$nextTick(function() {
					this.scrollValue = 0
				});
			},
			async change(e) {
				if (e) {
					const res = await API.getFuelCardById(e);
					this.fuelCard = res.data;
					await this.listAllFuelRecord();
				}
			},
			async refresh() {
				if (this.fuelCard && this.fuelCard.id) {
					await this.change(this.fuelCard.id);
				} else {
					if (this.fuelCardList.length == 0) {
						await this.listAllFuelCard();
					} 
					await this.change(this.fuelCardList[0].value);
			
				}
			
			},
			fueling() {
				uni.navigateTo({
					url: '/pages/materialPackage/fueling?id=' + this.fuelCard.id
				})
			},
			async listAllFuelCard() {
				this.show = false;
				const res = await API.listAllFuelCard();
				this.fuelCardList = res.rows.map(item => {
					return {
						value: item.id,
						text: item.cardNumber
					}
				})
				this.show=true;
			},

			async listAllFuelRecord() {
				const res = await API.listAllFuelRecord({
					params: {
						cardNumber: this.fuelCard.cardNumber
					}
				});
				this.fuelRecordList = res.rows;
			},

		}
	}
</script>

<style lang="less" scoped>
	.fuel-box {
		width: 90vw;
		height: 80vh;
		padding-top: 10rpx;
		box-sizing: border-box;
		.msg {
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 10px;
			padding: 10px;
			display: flex;
			align-items: center;
			gap: 4%;

			.card-select {
				display: flex;
				width: 60%;
				align-items: center;

				.select-box {
					width: 120px;
					height: 35px;
					border: 2px solid #3351EC;
					border-radius: 6px;

					/deep/ .uni-select {
						background-color: #3250EC !important;
						font-size: 14px !important;
						font-weight: 600 !important;
					}

					/deep/ .uni-select__input-text {
						color: #fff;
					}

					/deep/ .uniui-bottom::before {
						color: #FFF;
						font-weight: 600;
					}

					/deep/ .uniui-top::before {
						color: #FFF;
						font-weight: 600;
					}
				}
			}

			.card-acount {
				width: 40%;

				text:nth-of-type(2) {
					color: #FF5B02;
				}
			}
		}

		.btn {
			margin-bottom: 10px;
			display: flex;
			height: 40px;

			view {
				background-color: #fff;
				width: 100%;
				border: 2px solid #3250EC;
				border-radius: 4px;
				color: #3250EC;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 5px;
			}
		}

		.list {
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 10px;
			padding: 10px;

			.title {
				font-weight: 600;
				font-size: 14px;
				margin-bottom: 10px;
			}

			.item {
				color: #989898;
				font-size: 13px;

				span {
					margin-bottom: 5px;
				}

				view span:nth-of-type(1) {
					width: 30%;
					display: inline-block;
				}

				view span:nth-of-type(2) {
					color: #000;
				}
			}
		}
	}
</style>